<template>
  <div class="common-layout">
    <el-container style="height: 100vh;">
      <!-- 头部 -->
      <el-header class="header" height="60px">
        <div class="header-content">
          <span class="company-name">公司名称</span>
          <el-menu
            mode="horizontal"
            background-color="transparent"
            text-color="#333"
            active-text-color="#409EFF"
          >
            <el-menu-item index="1">集团管理</el-menu-item>
            <el-menu-item index="2">企业管理</el-menu-item>
            <el-menu-item index="3">平台运营</el-menu-item>
            <el-menu-item index="4">系统设置</el-menu-item>
          </el-menu>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="200px" class="sidebar">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="transparent"
            text-color="#333"
            active-text-color="#409EFF"
          >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><location /></el-icon>
                <span>公司管理</span>
              </template>
              <el-menu-item-group title="Group One">
                <el-menu-item index="1-1">item one</el-menu-item>
                <el-menu-item index="1-2">item two</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
            <el-menu-item index="2">
              <el-icon><icon-menu /></el-icon>
              <span>溯源管理</span>
            </el-menu-item>
          </el-menu>
        </el-aside>

        <!-- 主内容区域 -->
        <el-main class="main-content">
          <el-card class="box-card">
            <div class="card-content">
              <RouterView />
            </div>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { RouterView } from 'vue-router'
import { Location, Menu as IconMenu } from '@element-plus/icons-vue'
</script>

<style scoped>
.common-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa; /* 整体背景色 */
}

.header {
  background-color: #fff; /* 头部背景色 */
  color: #333;
  display: flex;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #e4e7ed; /* 头部底部边框 */
}

.header-content {
  display: flex;
  align-items: center;
  width: 100%;
}

.company-name {
  font-size: 20px;
  font-weight: bold;
  margin-right: 20px;
  color: #333; /* 公司名称颜色 */
}

.sidebar {
  background-color: #fff; /* 侧边栏背景色 */
  border-right: 1px solid #e4e7ed; /* 侧边栏右侧边框 */
}

.main-content {
  padding: 0; /* 去除内边距 */
  background-color: #f8f9fa; /* 主内容区域背景色 */
  overflow: hidden; /* 防止内容溢出 */
}

.box-card {
  height: calc(100vh - 60px); /* 铺满剩余高度 */
  border-radius: 0; /* 去除圆角 */
  box-shadow: none; /* 去除阴影 */
  border: none; /* 去除边框 */
  background-color: #fff; /* 卡片背景色 */
}

.card-content {
  padding: 20px;
  height: 100%; /* 铺满卡片高度 */
}
</style>